<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="header :: head"></head>
<!-- DataTables -->
<script type="text/javascript" src="" th:src="@{static/js/jquery.dataTables.min.js}"></script>
<link rel="stylesheet" type="text/css" media="all" href="" th:href="@{static/css/jquery.dataTables.min.css}" />

<body>
  
<div class="navbar navbar-fixed-top" th:include="navbar :: navbar"></div>

<div class="subnavbar" th:include="navbar :: subnavbarproperties"></div>

<div id="wrapper" class="container" >
 <div class="row">
  <div class="span9"> 
   <div id="content" class="clearfix" >
    <div class="main-inner" style="margin-top:60px">
     <div class="container">

 <div th:include="messages :: messagebar"></div>
     
 <div class="span12">
  <div class="widget widget-nopad">
   <div class="widget-header">
     <i class="icon-th-list"></i>
     <h3><span th:text="#{property.title}" >Properties</span></h3>
   </div>
   <div class="widget-content" style="padding:10px">
   
    <script type="text/javascript">
    $(document).ready(function(){
        $('#propertyTable').DataTable();
    });
 </script>
 
    <table id="propertyTable" name="propertyTable"  class="table table-striped table-bordered" style="margin-top:10px;">
     <thead>
      <tr>
      <th style="width:20%;text-align:center;"><span th:text="#{property.table.name}">Property</span></th>
       <th style="width:15%;text-align:center;"><span th:text="#{property.table.value}">Value</span></th>
       <th style="width:30%;text-align:center;"><span th:text="#{property.table.type}">Nature</span></th>
       <th style="width:25%;text-align:center;"><span th:text="#{property.table.fixedValue}">ValeursPrédéfinies</span></th>
       <th style="width:5%;text-align:center;" th:if="${enableEdit}">E</th>
       <th style="width:5%;text-align:center;" th:if="${enableEdit}">D</th>
      </tr>
    </thead>
    <tbody>
    <tr th:each="curProp,indexPop : ${listOfProperties}">
      <td>
        <!-- PropertyName -->
        <a class="ff4j-tooltip" tooltip="" 
           th:attr="tooltip=${curProp.description}" style="color:#008bab;font-weight:bold">
        <span th:text="${curProp.name}">uid</span></a>
      </td>
      <td style="text-align:center">
       <span style="color:#008bab" th:text="${curProp.value}">---</span>
      </td>
      <td style="text-align:center">
       <span style="color:#008bab" th:text="${curProp.type}">---</span>
      </td>
       <td style="text-align:center">
       <span style="color:#008bab" th:text="${curProp. fixedValues}">---</span>
      </td>
       <td style="width:5%;text-align:center" th:if="${enableEdit}">
      <a data-toggle="modal" href="#modalEditProperty" 
         th:attr="data-id=${curProp.name}"
         style="width:6px;margin-left:-3px;color:white;background-color:#008bab"
         class="open-EditPropertyDialog btn">
       <i class="icon-pencil"></i>
      </a>
     </td>
     
     <td style="width:5%;text-align:center" th:if="${enableEdit}">
         <a data-toggle="modal" href="#modalDeleteProperty" 
         th:attr="data-id=${curProp.name}"
         style="width:6px;margin-left:-3px;color:white;background-color:#ab0000"
         class="open-DeletePropertyDialog btn">
         <i class="icon-trash"></i>
        </a>
     </td>
     
    </tr>
    </tbody>
    </table>
    </div>
   </div>
  </div>
    	
	 </div>
	</div>
   </div>
  </div>
 </div>
</div>

<div th:include="modal-properties :: modal-createProperty"></div>

<div th:include="modal-properties :: modal-updateProperty"></div>

<div th:include="modal-properties :: modal-deleteProperty"></div>

<div th:include="modal-properties :: modal-rename"></div>

<div th:include="modal-properties :: modal-copy"></div>  
 
</body>
</html>